<template>
	<view class="warp">
		<!-- <c-navBar title="庄主购买" isSeat></c-navBar> -->
		<d-navBar title="庄主购买" isSeat leftFn @leftFn="goBack"></d-navBar>
		<!-- 普通庄主权益 -->
		<view class="content">
			<scroll-view scroll-x="true" @scroll="handleScroll" upper-threshold="200" @scrolltoupper="scrolltoupper"
				lower-threshold="200" @scrolltolower="scrolltolower">
				<view class="banner">
					<view class="banner-one">
						<view class="banner-one1">
							<view class="" style="padding-left: 20rpx;box-sizing: border-box;">
								<image style="width: 710rpx;height: 260rpx;" src="@/pages/my/static/bannerOne-icon.png"
									mode=""></image>
								<view class="banner-font">
									<p class="p1">庄主</p>
									<p class="p2">有效期：三年</p>
									<p class="p3"><text style="font-weight: bold;">￥{{estateInfo1.price}}</text>/亩</p>
								</view>
								<view class="banner-p" @click="gorecord">购买记录</view>
							</view>
						</view>
						<view class="banner-one1" style="position: relative;">
							<view class="" style="padding-left: 32rpx;box-sizing: border-box;padding-right: 20rpx;">
								<image style="width: 710rpx;height: 260rpx;" src="@/pages/my/static/bannerTwo-icon.png"
									mode="">
								</image>

								<view class="crownBanner-font">
									<p class="p1">皇冠庄主</p>
									<p class="p2">有效期：三年</p>
									<p class="p3"><text style="font-weight: bold;">￥{{estateInfo2.price}}</text>/亩</p>
								</view>

								<view class="crownBanner-p" @click="gorecord">购买记录</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 庄园收益 -->
			<view class="main">
				<view class="main-title">
					<view :class="type==1?'main-titleLeft':'crownMain-titleLeft'">

					</view>
					庄主权益
					<view :class="type==1?'main-titleRight':'crownMain-titleRight'">

					</view>
				</view>
				<view class="main-box">
					<view v-if="type==1" class="box" v-for="(item,index) in ownerEquity" :key="index">
						<image style="width: 88rpx;height: 88rpx;" :src="item.url" mode=""></image>
						<p>{{item.title}}</p>
					</view>
					<view v-if="type==2" class="box" v-for="(item,index) in ownerEquity1" :key="index">
						<image style="width: 88rpx;height: 88rpx;" :src="item.url" mode=""></image>
						<p>{{item.title}}</p>
					</view>
				</view>
				<view v-if="type==1" class="main-box1">
					1、收益分成5500元;<br>
					2、新茶品鉴;<br>
					3、专属商城折扣(茶系列是8.8折，礼品茶是6.8折， 衍生产品是7折);<br>
					4、茶园冠名权; 5、免费庄园度假旅游;<br>
					6、荐新奖励1000积分/亩；<br>
					7、初始积分：25500，三年以后可做提现。
				</view>
				<view v-if="type==2" class="main-box1">
					1、专属购物商城5折购物;<br>
					2、赠庄主身份礼盒;<br>
					3、收益分成5500元/亩;<br>
					4、新茶品鉴;<br>
					5、不定期衍生新品体验;<br>
					6、专属礼品定制，回馈定制金5000元/年;<br>
					7、茶园冠名权;<br>
					8、免费庄园度假旅游；<br>
					9、荐新奖励1500积分/亩。
				</view>
			</view>
			<view class="addMy" v-if="type==1&&userType<1">
				<view class="main-title">
					<view :class="type==1?'main-titleLeft':'crownMain-titleLeft'"></view>
					加入我们
					<view :class="type==1?'main-titleRight':'crownMain-titleRight'"></view>
				</view>
				<p class="mu-title"><text style="font-weight: bold;">￥{{estateInfo.price}}</text>/亩</p>
				<p class="mu-title1">支付{{estateInfo.price}}元认养金额和签订相关协议，有效期三年</p>
			</view>
			<view class="addMy" v-if="type==2&&userType<2">
				<view class="main-title">
					<view :class="type==1?'main-titleLeft':'crownMain-titleLeft'"></view>
					加入我们
					<view :class="type==1?'main-titleRight':'crownMain-titleRight'"></view>
				</view>
				<p class="mu-title2"><text style="font-weight: bold;">￥{{estateInfo.price}}</text>/亩</p>
				<p class="mu-title3">一次性支付10亩以上认养金(认养金为{{estateInfo.price}}元/亩) 和签订相关协议，有效期三年</p>
			</view>
			<view class="line">

			</view>

			<view class="btn-bg">
				<view v-if="type==1">
					<view class="foot" @click="goMu(estateInfo.price)">
						{{userType==0?'确定':userType==1?'续费升级':'确定'}}
					</view>
				</view>
				
				<view v-if="type==2" class="foot1" @click="goMu(estateInfo.price)">
					{{userType==0?'确定':userType==1?'确定':'续费'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				userType: '', //用户类型
				estateInfo: {}, //会员信息
				estateInfo1: {}, //会员信息
				estateInfo2: {}, //会员信息
				ownerEquity: [{
						id: 1,
						title: "收益分成",
						url: require('../static/orange1-icon.png')
					},
					{
						id: 2,
						title: "新茶品鉴",
						url: require('../static/orange2-icon.png')
					},
					{
						id: 3,
						title: "专属商城折扣",
						url: require('../static/orange3-icon.png')
					},
					{
						id: 4,
						title: "茶园冠名权",
						url: require('../static/orange4-icon.png')
					},
					{
						id: 5,
						title: "免费庄园游",
						url: require('../static/orange5-icon.png')
					},
					{
						id: 6,
						title: "荐新奖励",
						url: require('../static/orange6-icon.png')
					},
				],
				ownerEquity1: [{
						id: 1,
						title: "收益分成",
						url: require('../static/black1-icon.png')
					},
					{
						id: 2,
						title: "新茶品鉴",
						url: require('../static/black2-icon.png')
					},
					{
						id: 3,
						title: "专属商城5折",
						url: require('../static/black3-icon.png')
					},
					{
						id: 4,
						title: "身份礼盒",
						url: require('../static/black4-icon.png')
					},
					{
						id: 5,
						title: "新品体验",
						url: require('../static/black5-icon.png')
					},
					{
						id: 6,
						title: "回馈定制金",
						url: require('../static/black6-icon.png')
					},
					{
						id: 7,
						title: "茶园冠名权",
						url: require('../static/black7-icon.png')
					},
					{
						id: 8,
						title: "免费庄园游",
						url: require('../static/black8-icon.png')
					},
					{
						id: 9,
						title: "荐新奖励",
						url: require('../static/black9-icon.png')
					},
				]

			}
		},
		onLoad() {
			this.getEstateType()
			this.getDefEsType()
			this.userInfo()
		},
		onShow() {
			this.userInfo()
		},
		methods: {
			// 获取个人信息
			userInfo() {
				this.$api.userInfo().then(res => {
					console.log(res, "个人信息");
					this.userType = res.data.type;
					// uni.setStorageSync('userType', res.data.type);
				})

			},
			// 购买记录
			gorecord() {
				uni.navigateTo({
					url: '/pages/my/pages/recordBuy'
				})
			},
			// 会员信息
			getEstateType(id) {

				this.$api.getEstateTypeById({
					id: this.type
				}).then(res => {
					this.estateInfo = res.data
					console.log(res, "会员信息");
				})
			},

			getDefEsType() {
				this.$api.getEstateTypeById({
					id: 1
				}).then(res => {
					this.estateInfo1 = res.data
					console.log(res, "会员信息");
				})
				this.$api.getEstateTypeById({
					id: 2
				}).then(res => {
					this.estateInfo2 = res.data
					console.log(res, "会员信息");
				})
			},
			scrolltoupper() {
				this.type = 1
				this.getEstateType(1)
				// console.log(this.type,'111');
			},
			scrolltolower() {
				this.type = 2
				this.getEstateType(2)
				// console.log(this.type,'222');
			},

			// 检测滚动内容变化
			handleScroll(e) {
				// console.log(e,"滚动内容");
			},
			goMu(price) {
				if (this.type == 1) {
					uni.navigateTo({
						url: `/pages/my/pages/supportMu?price=${price}&type=1`
					})
				} else {
					uni.navigateTo({
						url: `/pages/my/pages/supportMu?price=${price}&type=2`
					})
				}
			},
			goBack() {
				uni.reLaunch({
					url:'/pages/tabbar/mine'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.line {
		width: 750rpx;
		height: 200rpx;
	}

	.btn-bg {
		width: 750rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;

	}

	.addMy {
		width: 710rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;

		.mu-title {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			color: #693612;
		}

		.mu-title1 {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #693612;
		}

		.mu-title2 {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			color: #3A2605;
		}

		.mu-title3 {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #3A2605;
		}
	}

	.main-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #1A1A1A;

		.main-titleLeft {
			width: 96rpx;
			height: 4rpx;
			background: linear-gradient(270deg, #FFA666 0%, rgba(255, 210, 188, 0) 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin-right: 14rpx;
		}

		.crownMain-titleLeft {
			width: 96rpx;
			height: 4rpx;
			background: linear-gradient(270deg, #000 0%, rgba(255, 210, 188, 0) 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin-right: 14rpx;
		}

		.main-titleRight {
			width: 96rpx;
			height: 4rpx;
			background: linear-gradient(90deg, #FFA666 0%, rgba(255, 210, 188, 0) 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin-left: 14rpx;
		}

		.crownMain-titleRight {
			width: 96rpx;
			height: 4rpx;
			background: linear-gradient(90deg, #000 0%, rgba(255, 210, 188, 0) 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin-left: 14rpx;
		}
	}

	p {
		padding: 0rpx;
		margin: 0rpx;
	}

	.warp {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #FDE5D3 0%, #F7F7F7 40%, #F7F7F7 100%);
		padding-top: 200rpx;
		box-sizing: border-box;
	}

	.banner {
		// white-space: nowrap;
		// width: 100%;
	}

	.banner-one {
		width: 710rpx;
		height: 260rpx;
		// margin: 0 auto;
		display: flex;
		position: relative;


		.banner-font {
			margin-top: -250rpx;
			margin-left: 48rpx;

			.p1 {
				font-size: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #693612;
			}

			.p2 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #693612;
				margin: 32rpx 0rpx 34rpx;
			}

			.p3 {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				color: #693612;
			}
		}

		.crownBanner-font {
			margin-top: -250rpx;
			margin-left: 48rpx;

			.p1 {
				font-size: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #FED19A;
				letter-spacing: 4px;
			}

			.p2 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #AA9986;
				margin: 32rpx 0rpx 34rpx;
			}

			.p3 {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FED19A;
			}
		}

		.banner-p {
			width: 100rpx;
			height: 46rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: absolute;
			right: 0;
			bottom: 0;

		}

		.crownBanner-p {
			width: 100rpx;
			height: 46rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #E5CFB5;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: absolute;
			right: 42rpx;
			bottom: 0;
		}

	}

	.main {
		width: 710rpx;
		// height: 920rpx;
		background: #FFFFFF;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-top: 28rpx;
		box-sizing: border-box;



		.main-box {
			// height: 360rpx;
			// width: 630rpx;
			border-bottom: 2rpx dashed #CCCCCC;
			margin: 0 auto;
			// margin-top: 40rpx;
			padding-bottom: 48rpx;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 3fr 3fr 3fr;
			grid-template-rows: 2fr 2fr;

			// flex-wrap: wrap;
			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 48rpx;
				// grid-column: 1 / span 1;
				// grid-row: 1 / span 1;

				p {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

		}

		.main-box1 {
			width: 640rpx;
			// height: 384rpx;
			padding-top: 36rpx;
			padding-bottom: 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin: 0 auto;

		}
	}

	.foot {
		width: 710rpx;
		height: 96rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		background: linear-gradient(56deg, #FF8B31 0%, #F9DDC8 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.foot1 {
		width: 710rpx;
		height: 96rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		background: linear-gradient(222deg, #41392D 0%, #1C1101 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>